<template>
    <div class="content-page">
      <div class="main">
        <p class="top-title">张驰实习专访</p>
        <p class="top-test">先进实习生张驰专访 心有所想,行必有方</p>
        <p class="top-tip">
          有一天，我在收件箱里收到一封电子邮件，说你有一条来自Google的消息。入职到公司以来我获得了团队的认可和展示自我的机会，公司环境非常得好，和优秀的同事共事很愉快，非常感谢数据学徒平台！
        </p>
        <div class="list">
          <div class="list-item">
            <p class="item-title">1、在这一个月实习中，你最大的收获是什么？</p>
            <p class="item-test">
              答：收获了知识，收获了温暖的学长学姐和一群共同努力的小伙伴们。
            </p>
            <p class="item-title">
              2、如果你被正式任用，你会以怎样的态度去工作？
            </p>
            <p class="item-test">
              答：我会本着认真负责的态度，认真对待每一张照片，每一篇新闻报道，本着求真务实的态度，虚心向学长学姐们请教。
            </p>
          </div>
          <img
            class="list-img"
            style="margin-left: 40px"
            src="@/assets/images/login-background.jpg"
            alt=""
          />
        </div>
        <div class="list">
          <img
            class="list-img"
            style="margin-right: 40px"
            src="@/assets/images/login-background.jpg"
            alt=""
          />
          <div class="list-item" style="margin-top: 33px">
            <p class="item-title">
              3、通过实习，你觉得你哪方面得到了锻炼？请简要回答。
            </p>
            <p class="item-test">
              答：在摄影方面，我收获了许多摄影的知识，学会了在不同场合，光线，环境下怎么拍照，学习了拍照三要素。在人际交往方面，我感受到学长学姐的温暖，收获了好多小伙伴。
            </p>
            <p class="item-title">4、工作中遇到的难题，你是怎样解决的？</p>
            <p class="item-test">
              答：冷静思考，虚心向学长学姐们请教，查找相关资料或者询问一下我的小伙伴们。
            </p>
          </div>
        </div>
        <div class="list">
          <div class="list-item" style="margin-top: 33px">
            <p class="item-title">
              5、进入网站工作会比较忙，你对自己和身边较为清闲的同学的两种不同的生活方式有什么看法？
            </p>
            <p class="item-test">
              答：我觉得我的生活更加的充实，每天过的都很有意义，我很享受拿着相机出去拍照的感觉，我可以尽情发现山理工的美丽。
            </p>
            <p class="item-title">6、怎样看待实习中的筛选与淘汰？</p>
            <p class="item-test">
              答：努力做好自己，实习中肯定会有筛选，也是网站可以督促我们变得更好，更加努力，为网站选拔好的工作人员，我们每个实习生应该好好对待，努力提升自己，不要去埋怨，你若盛开，蝴蝶自来。
            </p>
          </div>
        </div>
        <div class="video">
          <img class="video-img" src="@/assets/images/login-background.jpg" alt="" />
          <div class="video-btn">
            <img
              class="btn-img"
              src="@/assets/images/video-start-btn.png"
              alt=""
            />
          </div>
        </div>
        <div class="bottom-nav">
          <div class="nav-item">
            <i class="el-icon-arrow-left"></i>
            <span>先进实习生张驰专访 心有所想,行必有方</span>
          </div>
          <div class="nav-item">
            <span>所有学生</span>
            <i class="el-icon-arrow-down"></i>
          </div>
          <div class="nav-item">
            <span>先进实习生张驰专访 心有所想,行必有方</span>
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>
      </div>
    </div>
</template>
  <script>
    export default {
      // 组件名称
      name: "studentStyleDetails",
      // 组件参数 接收来自父组件的数据
      props: {},
      // 局部注册的组件
      components: {},
      // 组件状态值
      data() {
        return {};
      },
      // 计算属性
      computed: {},
      // 侦听器
      watch: {},
      // 组件方法
      methods: {},
      /**
       * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
       */
      created() {},
      /**
       * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
       * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
       */
      mounted() {},
    };
  </script>
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style lang="scss" scoped>
  .content-page {
    position: relative;
    width: 100%;
    height: 100%;
    .main {
      background: #fff;
      margin: 25px 110px 0;
      padding: 50px 40px;
      .top-title {
        font-size: 36px;
        font-weight: 600;
        color: #37383d;
        line-height: 50px;
        margin-bottom: 12px;
      }
      .top-test {
        font-size: 26px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #37383d;
        line-height: 37px;
        margin-bottom: 23px;
      }
      .top-tip {
        font-size: 20px;
        font-weight: 400;
        color: #9597a0;
        line-height: 28px;
        margin-bottom: 55px;
      }
      .list {
        display: flex;
        justify-content: space-between;
        margin-bottom: 34px;
        .list-item {
          .item-title {
            font-size: 23px;
            font-weight: 500;
            color: #0c0c0c;
            line-height: 32px;
            margin-bottom: 20px;
          }
          .item-test {
            font-size: 23px;
            font-weight: 400;
            color: #0c0c0c;
            line-height: 32px;
            margin-bottom: 42px;
          }
        }
        .list-img {
          width: 464px;
          height: 298px;
        }
      }
      .video {
        width: 753px;
        height: 435px;
        margin: auto;
        position: relative;
        .video-img {
          width: 100%;
          height: 100%;
        }
        .video-btn {
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 40%);
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          margin: auto;
          display: flex;
          align-items: center;
          justify-content: center;
          .btn-img {
            width: 104px;
            height: 104px;
          }
        }
      }
      .bottom-nav {
        margin-top: 80px;
        display: flex;
        justify-content: space-between;
        .el-icon-arrow-left {
          margin-right: 10px;
        }
        .el-icon-arrow-right,
        .el-icon-arrow-down {
          margin-left: 10px;
        }
        .nav-item {
          font-size: 24px;
          font-weight: 500;
          color: #2f8efe;
          line-height: 33px;
          cursor: pointer;
        }
      }
    }
  }
  </style>
</template>
